<template>
  <div class="page3">
    <h2 class="wow" style="visibility: visible">整装服务流程</h2>
    <ul>
      <li class="wow" style="visibility: visible" v-for="(item,index) in List" :key="index">
        <div v-for="(value,key) in item" :key="key">
          <i
            ><img
             
              :src="value.image"
              alt=""
          /></i>
          <p>{{ value.title }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";

const List = ref([
[
    {
        title:"初次沟通\\量尺",
        image:'/src/assets/img/matericl/p2_icon1.png'
    },
    {
        title:'方案设计初稿',
        image:'/src/assets/img/matericl/p2_icon2.png'
    },
    {
        title:'签订设计服务',
        image:'/src/assets/img/matericl/p2_icon3.png'
    },
    {
        title:'全案设计方案',
        image:'/src/assets/img/matericl/p2_icon4.png'
    }
],
[
    {
        title:'主材选配',
        image:'/src/assets/img/matericl/p2_icon5.png'
    },
    {
        title:'土建施工',
        image:'/src/assets/img/matericl/p2_icon6.png'
    },
    {
        title:'开工进场',
        image:'/src/assets/img/matericl/p2_icon7.png'
    },
    {
        title:'签订合同',
        image:'/src/assets/img/matericl/p2_icon8.png'
    }
],
[
    {
        title:'隐蔽工程施工',
        image:'/src/assets/img/matericl/p2_icon9.png'
    },
    {
        title:'硬装施工',
        image:'/src/assets/img/matericl/p2_icon10.png'
    },
    {
        title:'成品安装',
        image:'/src/assets/img/matericl/p2_icon11.png'
    },
    {
        title:'节点验收',
        image:'/src/assets/img/matericl/p2_icon12.png'
    }
],
[
    {
        title:'项目整体验收',
        image:'/src/assets/img/matericl/p2_icon13.png'
    },
    {
        title:'软装设计选配',
        image:'/src/assets/img/matericl/p2_icon14.png'
    },
    {
        title:'开荒保洁',
        image:'/src/assets/img/matericl/p2_icon15.png'
    },
    {
        title:'硬装修交付',
        image:'/src/assets/img/matericl/p2_icon16.png'
    }
],
[
    {
        title:'项目交付',
        image:'/src/assets/img/matericl/p2_icon17.png'
    },
    {
        title:'开具售后保卡',
        image:'/src/assets/img/matericl/p2_icon18.png'
    }
],
])
</script>

<style>
.cherrypick .page3 {
    padding: 1rem 0
}

.cherrypick .page3>h2 {
    font-size: .56rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-bottom: .63rem;
    opacity: 0;
    animation: slide-down-in 1s,fade-in 1s;
    animation-fill-mode: forwards
}

.cherrypick .page3 ul {
    padding: 0 .28rem;
    background: url() no-repeat;
    background-position: center 98%;
    background-size: 93% auto
}

.cherrypick .page3 ul li {
    display: flex;
    padding: .33rem 0;
    border-radius: .1rem;
    opacity: 0;
    animation: slide-down-in 1s,fade-in 1s;
    animation-fill-mode: forwards
}

.cherrypick .page3 ul li:nth-child(2n) div:after {
    transform: rotate(180deg)
}

.cherrypick .page3 ul li:nth-child(4) div:first-child:after,.cherrypick .page3 ul li:nth-child(4) div:nth-child(2):after {
    right: -.08rem
}

.cherrypick .page3 ul li:nth-child(4) div:nth-child(3):after {
    right: -.1rem
}

.cherrypick .page3 ul li:nth-child(4) div:nth-child(4):after {
    right: -.11rem
}

.cherrypick .page3 ul li div {
    position: relative;
    width:25%;
}

.cherrypick .page3 ul li div i {
    width: .71rem;
    height: .71rem;
    background: #f3f3f3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto
}

.cherrypick .page3 ul li div i img {
    animation: bounce-up-data-v-09df87d4 1.5s linear infinite
}

@-webkit-keyframes bounce-up-data-v-09df87d4 {
    10% {
        transform: rotate(20deg)
    }

    20% {
        transform: rotate(-10deg)
    }

    30% {
        transform: rotate(5deg)
    }

    40% {
        transform: rotate(-5deg)
    }

    50%,to {
        transform: rotate(0deg)
    }
}

.cherrypick .page3 ul li div p {
    font-size: .24rem;
    font-weight: 700;
    color: #000;
    line-height: .3rem;
    text-align: center;
    width: 1rem;
    margin: .1rem auto 0
}

.cherrypick .page3 ul li div:not(:last-child):after {
    content: "";
    position: absolute;
    right: -.1rem;
    top: 20%;
    width: .2rem;
    height: .2rem;
    background: url() no-repeat 50%;
    background-size: .16rem .2rem
}

</style>